<ion-header>

  <ion-toolbar>
    <ion-title>Clear Buttons</ion-title>
  </ion-toolbar>

</ion-header>


<ion-content padding style="text-align:center">

  <p>
    <button ion-button clear>Default</button>
    <button ion-button clear class="activated">Default.activated</button>
  </p>

  <p>
    <button ion-button clear color="primary">Primary</button>
    <button ion-button clear color="primary" class="activated">Primary.activated</button>
  </p>

  <p>
    <button ion-button clear color="secondary">Secondary</button>
    <button ion-button clear color="secondary" class="activated">Secondary.activated</button>
  </p>

  <p>
    <button ion-button clear color="danger">Danger</button>
    <button ion-button clear color="danger" class="activated">Danger.activated</button>
  </p>

  <p>
    <button ion-button clear color="light">Light</button>
    <button ion-button clear color="light" class="activated">Light.activated</button>
  </p>

  <p>
    <button ion-button clear color="dark">Dark</button>
    <button ion-button clear color="dark" class="activated">Dark.activated</button>
  </p>

  <p>
    <button ion-button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</button>
  </p>

</ion-content>
